<template>
  <el-dialog
    title="表单预览"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="90%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    :destroy-on-close="true"
    @open="handleOpen"
    @close="handleClose"
  >
    <div class="table-form-wrap">
      <div class="title">
        {{ formName }}
      </div>
      <div class="header">
        <!--  <span>工厂:</span> -->
        <span>车间:</span>
        <span>产线:</span>
        <span>班组:</span>
        <span>班次:</span>
        <span>执行人:</span>
        <span>审核人:</span>
        <span>日期:</span>
      </div>
      <div class="order">
        <span>工单：</span>
        <el-select
          v-model="workOrderNo"
          placeholder="请选择工单"
          size="small"
          disabled
        >
          <el-option
            v-for="item in workOrderNoOptions"
            :key="item.id"
            :label="item.itemName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <FromTemplate
        ref="FromTemplate"
        :templateConfig="templateConfig"
        :readonly="true"
      ></FromTemplate>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消预览</el-button>
    </span>
  </el-dialog>
</template>
<script>
import FromTemplate from "@/views/components/formTemplate/index";
const componentMap = {
  radio: "RADIO",
  singleSelect: "SELECT",
  text: "INPUT",
  datetime: "DATETIME",
  date: "DATE",
  multipleSelect: "CHECKBOX",
  number: "NUMBER",
  checkbox: "CHECKBOX",
  file: "UPLOAD",
  onlyread: "LABEL",
};
export default {
  components: { FromTemplate },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formName: {
      type: String,
      default: "",
    },
    formFieldConfig: {
      type: Object,
      default: () => ({}),
    },
    // 渲染模式，1-横向渲染，2-纵向渲染
    renderingMode: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      templateConfig: {},
      workOrderNo: null,
      workOrderNoOptions: []
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
  },
  methods: {
    handleOpen() {
      if (this.renderingMode == "1") {
        this.init();
      } else {
        this.initVertical();
      }
    },
    handleClose() {
      this.templateConfig = {};
    },
    initVertical() {
      const headLines = this.formFieldConfig?.headLines || [];
      if (!headLines?.length) {
        return;
      }

      this.templateConfig = {
        totalCol:
          (headLines[0].headList?.length || 0) +
          (headLines[0].fieldList?.length || 0),
        title: "",
        config: [],
      };

      headLines.forEach((row, rowIndex) => {
        const standarCells = row.headList || [];
        const fieldCells = row.fieldList || [];
        const standarCellLen = standarCells.length;
        let _cells = [];
        standarCells.forEach((col, colIndex) => {
          _cells.push({
            id: `cell_${rowIndex + 1}_${colIndex + 1}`,
            content: col.label,
            controllerType: "LABEL",
            colspan: 1,
            rowspan: 1,
          });
        });
        fieldCells.forEach((col, colIndex) => {
          _cells.push({
            id: `cell_${rowIndex + 1}_${standarCellLen + colIndex + 1}`,
            content:
              col.componentType == "onlyread"
                ? col.fieldName
                : "${list[" + colIndex + "]." + col.fieldCode + colIndex + "}",
            controllerType: componentMap[col.componentType] || "INPUT",
            options: JSON.parse(col.optionSetting || "[]").map((ele) => ({
              ...ele,
              value: ele.itemvalue,
              label: ele.itemvalue,
            })),
            required: col.isRequested == "1",
            colspan: 1,
            rowspan: 1,
            disabled: false,
            defaultValue: col.defaultValue,
          });
        });

        this.templateConfig.config.push({
          id: `row_${rowIndex + 1}`,
          cells: _cells,
        });
      });
    },
    init() {
      const headLines = this.formFieldConfig?.headLines || [];
      if (!headLines?.length) {
        return;
      }

      const totalCol = headLines.length;

      this.templateConfig = {
        totalCol: totalCol,
        title: "",
        config: [],
      };

      let rows = [];
      headLines.forEach((hl, hlIndex) => {
        hl.headList?.forEach((head, headIndex) => {
          if (!rows[headIndex]) {
            rows[headIndex] = {
              id: `row_${headIndex + 1}`,
              cells: [],
            };
          }
          rows[headIndex].cells[hlIndex] = {
            id: `cell_${headIndex + 1}_${hlIndex + 1}`,
            content: head.label,
            controllerType: "LABEL",
            colspan: 1,
            rowspan: 1,
          };
        });
        hl.fieldList?.forEach((field, fieldIndex) => {
          const startIndex = hl.headList.length + fieldIndex;
          if (!rows[startIndex]) {
            rows[startIndex] = {
              id: `row_${startIndex + 1}`,
              cells: [],
            };
          }
          rows[startIndex].cells[hlIndex] = {
            id: `cell_${startIndex + 1}_${hlIndex + 1}`,
            content:
              field.componentType == "onlyread"
                ? field.fieldName
                : "${list[" +
                  fieldIndex +
                  "]." +
                  field.fieldCode +
                  hlIndex +
                  "}",
            controllerType: componentMap[field.componentType] || "INPUT",
            options: JSON.parse(field.optionSetting || "[]").map((ele) => ({
              ...ele,
              value: ele.itemvalue,
              label: ele.itemvalue,
            })),
            required: field.isRequested == "1",
            colspan: 1,
            rowspan: 1,
            disabled: false,
            defaultValue: field.defaultValue,
          };
        });
      });

      this.templateConfig.config = rows;
    },

    handleCancel() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.table-form-wrap {
  .title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #303133;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      display: inline-block;
      width: 100%;
      text-align: left;
    }
  }
  .order {
    margin-top: 12px;
  }
}
</style>
